/**
 * Created by yhy on 2017/7/19.
 * 用法<Region onChange={this._onAddressChange}  value={['江苏省','南京市','雨花台区']} placeholder="请选择区域"></Region>
 * onChange事件会返回三个参数省、市、区 全部是中文
 * 支持value 但是传入的必须是数组按顺序排好
 *  同时value可以当做defaultValue使用
 *
 *  level 属性表示使用几级菜单。最大是3级
 */

import React,{Component} from 'react';
import assign from 'object-assign';
import $script from 'scriptjs';
import LocalRegion from  './localregion';
import { Cascader } from 'antd';
let loop = ()=>{};

export default class Region extends Component{
    constructor(props){
        super(props);
        this.state = {
            options:[]
        };
    }

    static defaultProps ={
        placeholder:"请选择地区",
        onChange:loop,
        value:[],
        level:3,
        disabled : false, //不可选，仅用于展示
    };

    componentDidMount(){
        $script('//pic.qianmi.com/themes/common/region/China_Region_Last.js',()=>{
            if(CHINA_REGION){
                assign(CHINA_REGION,LocalRegion)
            }
            this._initData();

        })
    }

    render(){
        let defaultVal = [];
        if(this.props.value.length > 0){
            const [p='',c='',a=''] = this.props.value;
            defaultVal = this._findItemVal(p,c,a);
        }
        return <div>
            <Cascader options={this.state.options}  value={defaultVal} onChange={this._changeVal} placeholder={this.props.placeholder} disabled={this.props.disabled}/>
        </div>
    }

    _changeVal=(values,items)=>{
        let ln = items.length;
        let province,city,area;
        if(ln > 0) province = items[0].label;
        if(ln > 1) city = items[1].label;
        if(ln > 2) area = items[2].label;
        this.props.onChange(province,city,area);
    };

    _initData=()=>{
        let level = this.props.level;
        let province = this._filterData('086');
        if(level > 1){
            for(let item of province) {
                let city = this._filterData(item.value);
                if (city.length > 0 && level > 2) {
                    for (let i = 0; i < city.length; i++) {
                        city[i].children = this._filterData(city[i].value);
                    }
                }
                item.children = city;
            }
        }

        this.setState({options:province});
    };
    _filterData(pid){
        let data = [];
        if(!CHINA_REGION) return data;
        for(let key of Object.keys(CHINA_REGION)){
            if (CHINA_REGION.hasOwnProperty(key)) {
                var value = CHINA_REGION[key];
                if (value[1] === pid) {
                    data.push({
                        value: key,
                        label: value[0]
                    })
                }
            }
        }
        return data;
    }

    _findItemVal=(province,city,area)=>{
        let data = this.state.options;
        let result = new Array();
        if(!data)return result;
        for(let item of data){
            if(item.label == province) {
                result.push(item.value);
                if (item.children) {
                    for (let c of item.children) {
                        if (c.label == city) {
                            result.push(c.value);
                            if (c.children) {
                                for (let a of c.children) {
                                    if (a.label  == area) {
                                        result.push(a.value);
                                        break;
                                    }
                                }
                                break;
                            }
                            break;
                        }
                    }
                }
                break;
            }
        }
        return result;
    }


}